<template>
  <back-btn></back-btn>
  <div>
    <button @click="showBtn">展示异步组件</button>
    <template v-if="isShowAsyncCom">
      <Suspense>
        <template #default>
          <AsyncCom />
        </template>
        <template #fallback>
          <div>组件加载中...</div>
        </template>
      </Suspense>
    </template>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, defineAsyncComponent } from "vue";

export default defineComponent({
  components: {
    // 异步组件引入方式
    /* 
        delay 展示加载组件前的延迟时间，默认为 200ms
        timeout 超时时间 
        loader 异步组件加载函数 
        errorComponent 异步组件加载失败时显示的组件 
        还有很多参数可以前往vue3文档查看  https://staging-cn.vuejs.org/guide/components/async.html
    */
    AsyncCom: defineAsyncComponent(() => import("../components/suspenseChild.vue")),
  },
  setup() {
    const isShowAsyncCom = ref(false);
    // 显示异步组件按钮
    function showBtn() {
      isShowAsyncCom.value = true;
    }

    return {
      isShowAsyncCom,
      showBtn,
    };
  },
});
</script>

<style scoped></style>
